<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>产品详情</title>
    <link href="/static/css/shopdetail/style/shopdetail.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/static/css/shoppingcart/reset.css">
    <link rel="stylesheet" href="/static/css/shoppingcart/carts.css">
    <link rel="stylesheet" href="/static/css/iconfont.css">
    <link rel="stylesheet" href="/static/css/index.css">

    <link rel="stelesheet" href="/static/plugins/layui/css/layui.css">
    <script src="/static/js/shopdetail/js/jquery-1.9.1.min.js"></script>
    <script src="/static/js/shopdetail/datadetail.js"></script>
    <script src="/static/js/shopdetail/js/common.js"></script>
    <link rel="stylesheet" href="/static/js/shopdetail/jiajian/css/jquery.spinner.css"/>
    <script src="/static/js/shopdetail/shopcart/js/script.js"></script>
    <style type="text/css">
        .spinnerExample {
            margin: 10px 0;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var showproduct = {
                "boxid": "showbox",
                "sumid": "showsum",
                "boxw": 420,
                "boxh": 500,
                "sumw": 60,//列表每个宽度,该版本中请把宽高填写成一样
                "sumh": 60,//列表每个高度,该版本中请把宽高填写成一样
                "sumi": 7,//列表间隔
                "sums": 5,//列表显示个数
                "sumsel": "sel",
                "sumborder": 1,//列表边框，没有边框填写0，边框在css中修改
                "lastid": "showlast",
                "nextid": "shownext"
            };//参数定义	  
            $.ljsGlasses.pcGlasses(showproduct);//方法调用，务必在加载完后执行	 
            $(function () {
                $('.tabs a').click(function () {
                    var $this = $(this);
                    $('.panel').hide();
                    $('.tabs a.active').removeClass('active');
                    $this.addClass('active').blur();
                    var panel = $this.attr("href");
                    $(panel).show();
                    return fasle;  //告诉浏览器  不要纸箱这个链接
                })//end click			
                $(".tabs li:first a").click()   //web 浏览器，单击第一个标签吧		
            })//end ready		
            $(".centerbox li").click(function () {
                $("li").removeClass("now");
                $(this).addClass("now")
            });
        });
    </script>
    <#--    <script>-->
    <#--        $(document).ready(function () {-->
    <#--            $('#top-test').load('top.html')-->
    <#--        });-->
    <#--    </script>-->
    <script type="text/javascript" src="/static/js/shopdetail/matching.js"></script>
    <style>
        .divtest {
            width: 200px;
            height: 34px;
            /* margin:200px auto; */
            margin-left: 20px;
            padding: 0;
            position: relative;
        }

        .divtest input {
            width: 200px;
            height: 30px;
            line-height: 30px;
            font: 14px arial;
            color: #333;
            border: 1px solid #b8b8b8;
            padding: 2px 0px 2px 8px;
            border-radius: 5px;
            box-shadow: 0 0 16px 0 rgba(53, 53, 53, .2);
        }

        #search-button {
            position: absolute;
            height: 30px;
            width: 30px;
            top: 3px;
            right: -6px;
            /* background-color: #fff; */
            cursor: pointer;
        }

        .search-img {
            position: absolute;
            height: 0px;
            width: 0px;
            top: 10px;
            right: 10px;
            overflow: hidden;
            cursor: pointer;
            border-width: 5px;
            border-style: solid dashed dashed;
            border-color: #acacac transparent transparent;
            background-repeat: no-repeat;
            opacity: .6;
        }

        .divtest span.up {
            border-width: 5px;
            border-style: dashed dashed solid;
            border-color: transparent transparent #acacac;
            top: 6px;
        }

        .divtest select {
            width: 210px;
            height: 200px;
            margin: 0px;
            padding: 2px 0px;
            outline: none;
            border: 1px solid #b8b8b8;
            position: absolute;
            top: 35px;
            left: 0;
            box-shadow: 0 0 16px 0 rgba(53, 53, 53, .2);
        }

        .divtest select option {
            height: 18px;
            line-height: 18px;
            cursor: default;
            font: 14px arial;
            padding: 2px 8px;
        }

        .divtest select option:hover {
            background: #f0f0f0;
        }
    </style>
    <!--核心样式-->
    <link rel="stylesheet" href="/static/js/shopdetail/shopcart/css/style.css">
    <!--图标库-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/>
</head>

<body>
<!-- 点击飞入 -->
<div id="cart" class="cart" data-totalitems="0" style="z-index: 999">
    <i class="fas fa-shopping-cart"></i>
</div>
<script>
    $(document).ready(function () {
        $("#cart").click(function () {
            window.open("cart.html");
        });
    });
</script>
<div class="top-nav">
    <div class="w clearfix">
        <div class="login" id="loginuser">
            <a id="login" target="_self" href="login.html" class="h">您好，请登录</a>
            <a id="register" target="_blank" href="login.html" href="#">免费注册</a>
        </div>
        <ul class="nav-list">
            <li>
                <a href="#" class="link" id ="myOrder">我的订单<span style="color: red;"><b
                                id="orderNum"></b></span></a>
            </li>
            <li>
                <a href="/cart.html" class="link" target="_blank">购物车<span style="color: red;"><b
                                id="cartNum"></b></span></a>
            </li>
            <li>
                <a href="http://localhost:8888/static/login.html" class="link">供应商后台</a>
            </li>
            <li>
                <a href="#" class="link">收藏夹</a>
            </li>
            <li>
                <a href="#" class="link">联系客服</a>
            </li>
        </ul>
    </div>
</div>


<!-- <script src='js/jquery.min.js'></script> -->



<!-- <script type="text/javascript" src="js/shopdetail/jiajian/js/jquery-1.8.0.min.js"></script> -->
<script type="text/javascript" src="/static/js/shopdetail/jiajian/js/jquery.spinner.js"></script>
<script>
    $(function () {
        bodyevent("#typenum", "#makeupCo", "#search-button");
    })
</script>
<div id="top-test"></div>
<!-----商品详情部分------->
<div class="shopdetails" style="margin-top:20px;">
    <!-------放大镜-------->
    <div id="leftbox">
        <div id="showbox">
<#--            <img src="img/shopdetail/shopdetail/img01.png" width="420" height="500" />-->
<#--            <img src="img/shopdetail/shopdetail/img02.png" width="420" height="500" />-->
<#--            <img src="img/shopdetail/shopdetail/img03.png" width="420" height="500" />-->
<#--            <img src="img/shopdetail/shopdetail/img04.png" width="420" height="500" />-->
<#--            <img src="img/shopdetail/shopdetail/img05.png" width="420" height="500" />-->
<#--            <img src="img/shopdetail/shopdetail/img01.png" width="420" height="500" />-->
        </div>
        <!--展示图片盒子-->
        <div id="showsum"></div>
        <!--展示图片里边-->
        <p class="showpage">
            <a href="javascript:void(0);" id="showlast">
                < </a>
            <a href="javascript:void(0);" id="shownext"> > </a>
        </p>
    </div>
    <!----中间----->
    <div class="centerbox">
<#--        <p class="imgname" style="margin-left: 10px;">叠叠杯水杯茶杯套杯陶瓷咖啡牛奶杯具套装</p>-->
<#--        <p style="margin-left: 10px;">更新时间：</p>-->
<#--        <p class="Aprice" style="margin-left: 10px;">价格：<samp style="font-size:15px;">￥89.00</samp></p>-->
<#--        <p class="price" style="margin-left: 10px;">促销价：<samp style="font-size:25px;">￥49.00</samp></p>-->
<#--        <p class="price" style="margin-left: 10px;">起批量：<span>￥49.00</span></p>-->
<#--        <div class="clear"></div>-->
<#--        <p class="chima">发货地址: <span>123456</span></p>-->
<#--        <div class="clear"></div>-->
<#--        <div class="clear"></div>-->
<#--        <p class="chima">商家: <span>屠鹏</span></p>-->
<#--        <div class="clear"></div>-->
<#--        <div class="clear"></div>-->
<#--        <p class="chima">规格选择:</p>-->
<#--        <div class="divtest">-->
<#--            <input type="text" style="background-color: rgb(243, 245, 238);" name="makeupCo" id="makeupCo"-->
<#--                   class="makeinp" onfocus='setfocus(this,"#typenum","#makeupCo","#search-button")'-->
<#--                   oninput='setinput(this,"#typenum");' placeholder="请选择需要的规格">-->
<#--            <div id="search-button"-->
<#--                 onclick='setfocus(document.getElementById("makeupCo"),"#typenum","#makeupCo","#search-button")'>-->
<#--                <span class="search-img"></span></div>-->
<#--            <select name="makeupCoSe" id="typenum" onchange='changeF(this,"#typenum","makeupCo","#search-button")'-->
<#--                    size="10" style="display:none;width: 200px;z-index: 999;">-->
<#--&lt;#&ndash;                <option>张家辉回应渣渣辉</option>&ndash;&gt;-->
<#--&lt;#&ndash;                <option>张家界旅游攻略</option>&ndash;&gt;-->
<#--            </select>-->
<#--        </div>-->
<#--        <div class="clear"></div>-->
<#--        <p class="chima">请选择数量:</p>-->
<#--        <!-- 加减器 &ndash;&gt;-->
<#--        <input type="text" class="spinnerExample"/>-->
<#--        <script type="text/javascript">-->
<#--            $('.spinnerExample').spinner({});-->
<#--        </script>-->
<#--        <div class="page-wrapper">-->
<#--            <p class="buy"><a id="firstbuy">立即购买</a>-->
<#--                <button id="addtocart" style="width: 200px; height: 50px;margin-left: 10px;">-->
<#--                    <i>添加购物车</i>-->
<#--                    <span class="cart-item"></span>-->
<#--                </button>-->
<#--            </p>-->
<#--        </div>-->
<#--        <div class="clear"></div>-->
<#--        <p class="fuwu">服务承诺：</p>-->
<#--        <p class="pay">支付方式：</p>-->
    </div>
    <!-----右边------->
    <div class="rightbox">
<#--        <p class="name">——热卖商品</p>-->
<#--        <img src="img/shopdetail/shopdetail/reimai02.jpg" width="130" height="180">-->
<#--        <p>￥58元</p>-->
<#--        <img src="img/shopdetail/shopdetail/reimai01.jpg" width="130" height="180">-->
<#--        <p>￥58元</p>-->
<#--        <img src="img/shopdetail/shopdetail/reimai03.jpg" width="130" height="180">-->
<#--        <p>￥58元</p>-->
    </div>

</div>
<!-----商品详情部分结束------->

<script src="/static/plugins/layui/layui.js"></script>
<#if Session["userid"]?exists>
    <input type="hidden" id="username" value="${Session["userid"]}">
</#if>
<script>
    $(document).ready(function () {
        var userName = $("#username").val();
        //登录成功后
        loginSuccess();
        //获取购物车数量
        $.ajax({
            url: "/getShopcartNum",
            data: {userName: userName},
            type: "post",
            success: function (res) {
                if (res.code === 0) {
                    $("#cart").attr("data-totalitems",res.data);
                }
            }
        });
        //获取购物车数量
        $.ajax({
            url: "/getOrderNum",
            data: {userName: userName},
            type: "post",
            success: function (res) {
                if (res.code === 0) {
                    $("#orderNum").html(res.data);
                }
            }
        });
    });

    function loginSuccess() {
        var user = $("#username").val();
        if (user == null || user == "" || user.length == 0) {

        } else {
            str = `<p id="userhover" style="margin-left: 50px">欢迎，` + user + `</p>`;
            $("#loginuser").html(str);
        }
    }
</script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        $("#userhover").click(function () {
            layer.confirm('亲！您确定要退出登录吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                // layer.msg('的确很重要', {icon: 1});
                window.location.href="/loginout.html";
            }, function(){

            });

        });
        //我的订单
        $("#myOrder").click(function (){
            //iframe层-父子操作
            layer.open({
                type: 2,
                title: '我的订单',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['1100px', '700px'],
                content: '../static/myOrder.html'
            });
        });
    });
</script>
</body>

</html>